$control-dataview: (
  text-color: getCssVar(color, text, 0),
  hover-bg-color: getCssVar(color, fill, 0),
  active-bg-color: getCssVar(color, fill, 0),
);

@include b(control-dataview) {
  @include set-component-css-var(control-dataview, $control-dataview);;

  width: 100%;
  height: 100%;
}

@include b(control-dataview-scroll) {
  @include flex(row, null, null, wrap);

  gap: 12px;
  align-content: flex-start;
  width: 100%;
  height: 100%;
  overflow: auto;
}

@include b(control-dataview-item) {
  @include set-component-css-var(control-dataview, $control-dataview);;

  color: getCssVar(control-dataview, text-color);
  cursor: pointer;

  &:hover {
    background-color: getCssVar(control-dataview, hover-bg-color);
  }

  @include when(active) {
    background-color: getCssVar(control-dataview, active-bg-color);
  }
}

@include b(control-dataview-item-content) {
  @include set-component-css-var(control-dataview, $control-dataview);

  @include e(top) {
    @include m(title) {
      text-align: center;
    }

    @include m(description) {
      min-width: 150px;
      text-align: justify;
      text-justify: newspaper;
      word-break: break-all;
    }
  }

  @include e(bottom) {
    @include m(actions) {
      display: flex;
      justify-content: center;
    }
  }
}

@include b(control-dataview-group-content) {
  width: 100%;
  overflow: auto;

  @include e(item) {
    .el-collapse-item__content {
      display: flex;
      flex-wrap: wrap;
    }

    @include m(empty) {
      width: 100%;
      text-align: center;
    }
  }
}
